<template>
	<view class="main">
		<header-vue :back="true" :title="title"></header-vue>
		<view class="list">
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>基础信息</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>联系人</view>
					<input class="font28" placeholder="请输入联系人" />
				</view>
				<view class="flex between form-item font28">
					<view>联系电话</view>
					<input class="font28" placeholder="请输入联系电话" />
				</view>
				<view class="flex between form-item font28">
					<view>商家名称</view>
					<input class="font28" placeholder="请输入商家名称" />
				</view>
				<view class="flex between form-item font28">
					<view>商家地址</view>
					<input class="font28" placeholder="请输入商家地址" />
				</view>
				<view class="flex between form-item font28">
					<view>选择小区</view>
					<input class="font28" placeholder="请输入选择小区" />
				</view>
				<view class="flex between form-item font28">
					<view>选择小区</view>
					<input class="font28" placeholder="请输入选择小区" />
				</view>
			</view>
			<view class="white-box" style="background: #fff;padding-bottom: 28rpx;">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>证件照片</view>
				</view>
				<view class="flex column upload-img">
					<i class="iconfont icon-camera"></i>
					<view class="font20">上传照片</view>
				</view>
			</view>
		</view>
		<view class="flex center fixed">
			<view class="flex btn-buy" @click="goPage()">提交资料</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				title: '',
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage() {
				uni.navigateTo({
					url:'/views/mine/ruzhushenhe'
				});
			},
		},
		onLoad(options) {
			this.title = options.name == 0 ? '服务商家入驻' : '商城商家入驻'
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.white-box {
		min-height: 200rpx;
		background: linear-gradient(180deg, #F5FBFF 0%, #FFFFFF 12%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 40rpx 28rpx 0;
		box-sizing: border-box;
		margin-top: 28rpx;

		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

	}

	.form-item {
		height: 118rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #DDDDDD;

		.icon-jiantou {
			margin-left: 8rpx;
			margin-right: 0;
		}

		.flex {
			width: 400rpx;
		}

		input {
			text-align: right;

			::v-deep .input-placeholder {
				color: #AAAAAA;
			}
		}
	}

	.upload-img {
		width: 140rpx;
		height: 160rpx;
		background: #F8F8F8;
		border-radius: 4rpx;
		margin-top: 40rpx;
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

		.btn-buy,
		.btn-join {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			width: 100%;
			box-sizing: border-box;
		}

		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		.radio {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
		}

		.active {
			color: $uni-text-color;

			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}
</style>